﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<title>Rain CSS > CSS3 Examples</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> 
<!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>

<body class="body">	
	<div class="header headerBlue">
  	<nav class="lsn posr clearfix">
    	<a href="http://www.webdevelopmentmachine.com" class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
    	<a href="http://www.webdevelopmentmachine.com/blog" class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
    	<a href="http://www.webdevelopmentmachine.com/demo/game.html" class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
    </nav>
  </div>
	<div class="headerM headerGrey">
  	<div class="container posr">
    	<div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
    </div>
  </div>
  
<div class="container marginTop"> 
    <div class="content">
		<div class="sidebar l posr">
			<h2 class="category">CSS3例子 CSS3 Examples</h2>
			<p>该部分为css3构建的各种实例 This part examples all build with CSS3</p>
		</div>
		<div class="main mainRight posr">	  
		<h1>CSS3例子 CSS 3 examples</h1>
		
		<p class="round css3_background_clip menuNav mt">圆角 radius</p> 
		
		<p class="css3_box_shadow p mt">阴影效果 box-shadow</p>
		
		<p class="border css3_text_shadow boder fsl p mt">文字阴影 text-shadow</p>
		
		<p class="css3_gradient p mt">线性渐变 linear-gradient</p>
		
		<p class="p css3_color_HSL mt">hsl颜色 hsl</p>
		
		<p class="p css3_color_HSLA mt">hsla颜色 hsla</p>
		
		<p class="p css3_color_rgba mt">rgba颜色 rgba</p>
		
		<p class="css3_rotate menuNav mt">旋转 rotate</p>
		
		<a class="block css3_transition menuNav p mt" href="#">过渡 transition</a>
		
		<p class="css3_matrix menuNav marginTop mt">矩阵 matrix</p>
		
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" />
		<div class="clearfix">
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>3d矩阵 matrix3d</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="css3_matrix_3D border"/>
		</div>
		   
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>转换 translate</h3> 
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_translate"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>3d转换 translate3d</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_translate_3D"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>x轴转换 translateX</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_translateX"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>y轴转换 translateY</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_translateY"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>z轴转换 translateZ</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_translateZ"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>比例 css3_scale</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_scale"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>3d比例 css3_scale_3D</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_scale_3D"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>x轴比例 css3_scaleX</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_scaleX"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>y轴比例 css3_scaleY</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_scaleY"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>z轴比例 css3_scaleZ</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_scaleZ"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>旋转 css3_rotate</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_rotate"/>
		</div> 
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>3d旋转 css3_rotate_3D</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_rotate_3D"/>
		</div> 
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>x轴旋转 css3_rotateX</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_rotateX"/>
		</div> 
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>y轴旋转 css3_rotateY</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_rotateY"/>
		</div> 
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>z轴旋转 css3_rotateZ</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_rotateZ"/>
		</div> 
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>歪斜 css3_skew</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_skew"/>
		</div> 
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>x轴歪斜 css3_skewX</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_skewX"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>y轴歪斜 css3_skewY</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_skewY"/>
		</div>
		
		<div style="width:300px; height:200px;" class="posr l border">
		<h3>透视 css3_perspective</h3>
		<img src="images/html5_logo.jpg" width="100" height="141" alt="html5 logo" class="border css3_perspective"/>
		</div>
		</div>
		
		<p class="opacity">透明 opacity</p>
		<footer class="footer socialFooter c borderTop">
		  <p class="ps">Maintained by the <a href="https://github.com/rainzhai" class="blue">RainZhai</a>.</p>
		  <p class="ps">Code licensed under <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> 
		</footer>  
  	</div>
    
</div>
</body>
</html>
